<script setup lang="ts">
defineOptions({
  name: 'AppSidebar',
})
</script>

<template>
  <aside
    class="w-[80px] h-screen bg-white border-r border-gray-200 flex flex-col items-center py-5 fixed top-0 left-0 z-10"
  >
    <nav class="flex flex-col gap-2 w-full items-center">
      <a
        href="/"
        class="flex items-center justify-center gap-3 w-[calc(100%-20px)] p-3 rounded-lg text-indigo-500 bg-gray-100 font-medium relative group"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M9 22V12H15V22"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <span
          class="text-sm absolute left-full ml-3 bg-gray-800 text-white px-3 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none"
          >首页</span
        >
      </a>
      <a
        href="#"
        class="flex items-center justify-center gap-3 w-[calc(100%-20px)] p-3 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-indigo-500 transition-colors relative group"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20 3H4C2.89543 3 2 3.89543 2 5V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V5C22 3.89543 21.1046 3 20 3Z"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M16 3V7H8V3"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <span
          class="text-sm absolute left-full ml-3 bg-gray-800 text-white px-3 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none"
          >收藏</span
        >
      </a>
      <a
        href="#"
        class="flex items-center justify-center gap-3 w-[calc(100%-20px)] p-3 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-indigo-500 transition-colors relative group"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M17 3H7C4.79086 3 3 4.79086 3 7V19C3 21.2091 4.79086 23 7 23H17C19.2091 23 21 21.2091 21 19V7C21 4.79086 19.2091 3 17 3Z"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M7 8H21"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <span
          class="text-sm absolute left-full ml-3 bg-gray-800 text-white px-3 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none"
          >分类</span
        >
      </a>
      <a
        href="#"
        class="flex items-center justify-center gap-3 w-[calc(100%-20px)] p-3 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-indigo-500 transition-colors relative group"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <span
          class="text-sm absolute left-full ml-3 bg-gray-800 text-white px-3 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none"
          >用户</span
        >
      </a>
    </nav>
    <div class="mt-auto w-full flex flex-col items-center pb-5">
      <button
        class="flex items-center justify-center gap-3 w-[calc(100%-20px)] p-3 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-indigo-500 transition-colors relative group"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <span
          class="text-sm absolute left-full ml-3 bg-gray-800 text-white px-3 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none"
          >设置</span
        >
      </button>
    </div>
  </aside>
</template>
